﻿@page "/tests/utilities/grid"
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>CSS Grid Example</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>As the grid can be divided into 12 columns, there are size utilities for each division:</CardText>
            </CardBody>
            <CardBody>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is12">
                        <Div>
                            Is12
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is11">
                        <Div>
                            Is11
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is1">
                        <Div>
                            Is1
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is10">
                        <Div>
                            Is10
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is2">
                        <Div>
                            Is2
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is9">
                        <Div>
                            Is9
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is3">
                        <Div>
                            Is3
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is8">
                        <Div>
                            Is8
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is4">
                        <Div>
                            Is4
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is7">
                        <Div>
                            Is7
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is5">
                        <Div>
                            Is5
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is6">
                        <Div>
                            Is6
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is6">
                        <Div>
                            Is6
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is5">
                        <Div>
                            Is5
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is7">
                        <Div>
                            Is7
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is4">
                        <Div>
                            Is4
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is8">
                        <Div>
                            Is8
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is3">
                        <Div>
                            Is3
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is9">
                        <Div>
                            Is9
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is2">
                        <Div>
                            Is2
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is10">
                        <Div>
                            Is10
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is1">
                        <Div>
                            Is1
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is11">
                        <Div>
                            Is11
                        </Div>
                    </Column>
                </Grid>
                <Grid Class="b-demo-cssgrid-columns">
                    <Column ColumnSize="ColumnSize.Is2">
                        <Div>
                            Is2
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is3">
                        <Div>
                            Is3
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is4">
                        <Div>
                            Is4
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is2">
                        <Div>
                            Is2
                        </Div>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is1">
                        <Div>
                            Is1
                        </Div>
                    </Column>
                </Grid>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>CSS Grid Columns</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Use the responsive <code>GridColumns.Are*</code> utilities to quickly set the number of columns that best render your content and layout.

                    Whereas normal <code>ColumnSize.Is*</code> utilities apply to the individual columns (e.g., <code>ColumnSize.Is4</code>), the grid columns utilities are set on the parent <code>Grid</code> as a shortcut.
                </CardText>
            </CardBody>
            <CardBody>
                <Grid Rows="GridRows.Are2" Columns="GridColumns.Are2" Class="b-demo-cssgrid-divs">
                    <Div>
                        Col 4
                    </Div>
                    <Div>
                        Col 4
                    </Div>
                    <Div>
                        Col 4
                    </Div>
                </Grid>
            </CardBody>
        </Card>
    </Column>
</Row>
@code {

}
